const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpackBaseConfig = require('./webpack.base.config.js')
const path = require('path')
const source = './src'

module.exports = merge(webpackBaseConfig, {
  devtool: '#source-map',
  mode: 'development',
  entry: {
      'scripts/app':  path.resolve(__dirname, source, 'app.js'),
      'scripts/babel-polyfill':'babel-polyfill',
      'scripts/vendor': ['vue', 'vue-router', 'vuex'],
      'hot':'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000'

  },
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              hash: 'sha512',
              digest: 'hex',
              limit: 8192,
              name: 'images/[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              query: {
                optimizationLevel: 7,
                interlaced: false,
                pngquant: {quality: '65-90', speed: 4},
                mozjpeg: {quality: 65, progressive: true},
                gifsicle: {interlaced: true},
                optipng: {optimizationLevel: 7}
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'styles/[name].css',
      allChunks: true
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, source, 'html', 'index.html'),
      filename: 'index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
})
